<template>
  <div>
    <div class="home-layout">
      <div class="gutter-example">
        <a-row class="hl-top">
          <a-col class="gutter-row" :span="24" style="text-align: -webkit-center;">
            <div class="gutter-box big-title">
              <img src="../../assets/homePage/logo.png" width="72"/>
              <div style="display: inline-block;width: 1px; height: 22px;margin: 0 12px -4px 18px;background: #345b94;"></div>
              机动车全生命周期溯源平台
            </div>
            <div class="more">更多</div>
            <div style="width: 30%;height: 1px;background-image: radial-gradient(#3e9ad0, #142132);"></div>
          </a-col>
        </a-row>
        <a-row :gutter="gutter">
          <!--leftStart-->
          <a-col class="gutter-row" :span="left">
            <div class="gutter-box left-container">
              <div class="l-one">
                <div class="lo-container">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="loc-title">机动车保有量</div>
                    </div>
                    <div class="loc-container">
                      <span v-for="(item, index) in registerNum" :key="index">
                        <div style="padding-left: 1.5rem">
                          <span class="y-title">{{item.total.title}}</span>：<span class="y-value">{{item.total.value}}</span><span class="y-unit">{{item.total.unit}}</span>
                          （<span class="n-title">{{item.newEnergy.subtitle}}</span>：<span class="n-value">{{item.newEnergy.value}}</span><span class="unit">{{item.newEnergy.unit}}</span>）
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="l-two">
                <div class="lt-container">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="loc-title">保有量占比</div>
                    </div>
                    <ul class="tab-list clearfloat">
                      <li class="tab-itom">
                        <input type="radio" id="testTabRadio1" class="test-radio" name="tab">
                        <label class="test-label" for="testTabRadio1"></label>
                        <div class="tab-box">
                          <div class="one">
                            <div class="ltc-left">
                              <car-register></car-register>
                            </div>
                            <div class="ltc-right">
                              <private></private>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="tab-itom">
                        <input type="radio" id="testTabRadio2" class="test-radio" name="tab" checked="checked">
                        <label class="test-label" for="testTabRadio2"></label>
                        <div class="tab-box">
                          <div class="one">
                            <div class="ltc-left">
                              <annular></annular>
                            </div>
                            <div class="ltc-right">
                              <pie></pie>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="l-three">
                <div class="lt-container-bottom">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="ltcb-title">二手车交易流向</div>
                    </div>
                    <div class="ltcb-container">
                      <china-map></china-map>
                    </div>
                  </div>
                </div>
              </div>
              <div class="l-four">
                <div class="lt-container-top">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="ltct-title">二手车交易总量</div>
                    </div>
                    <!--<div class="ltct-container" v-for="(item, index) in SecondHandData" :key="index" >
                      <div class="ltc-left" v-if="index%2!=0">
                        <span >{{item.item}}: </span>
                        <span><span >{{item.value}}</span>{{item.unit}}</span>
                      </div>
                      <div class="ltc-right" v-else-if="index%2==0">
                        <span>{{item.item}}: </span>
                        <span><span>{{item.value}}</span>{{item.unit}}</span>
                      </div>
                    </div>-->
                    <div class="ltct-container" v-for="(item, index) in SecondHandData" :key="index" >
                      <div class="ltc-left">
                        <span >{{item.item}}: </span>
                        <span><span class="ll-text">{{item.value}}</span>{{item.unit}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="center">
            <div class="gutter-box center-container">
              <div class="c-two">
                <div class="ctwo-container">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="loc-title">机动车销量区域分布</div>
                    </div>
                    <div class="ct-container">
                      <shang-hai-map></shang-hai-map>
                    </div>
                  </div>
                </div>
              </div>
              <div class="c-three">
                <div class="cthree-container">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="loc-title">资讯栏</div>
                    </div>
                    <div class="ct-container">
                      <information-bar></information-bar>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
          <!--centerEnd-->
          <!--rightStart-->
          <a-col class="gutter-row" :span="right">
            <div class="gutter-box right-container">
              <!--<div class="r-one">
                更多 进入商务合作页面
              </div>-->
              <div class="r-two">
                <div class="rtwo-container">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="loc-title">经销商集团销售情况占比</div>
                    </div>
                    <div class="ct-container">
                      <sales-status></sales-status>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r-three">
                <div class="rthree-container">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="loc-title">本市范围内销售额监测</div>
                    </div>
                    <div class="ct-container">
                      <bar></bar>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r-four">
                <div class="rfour-container">
                  <div class="bg-border">
                    <div class="bg-title"></div>
                    <div class="bg-bar">
                      <div class="loc-title">周活跃经销商和销售顾问</div>
                    </div>
                    <div class="ct-container">
                      <div class="one">
                        <dealer></dealer>
                      </div>
                      <div class="two">
                        <sales-consultant></sales-consultant>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
          <!--rightEnd-->
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
  import Private from './homePage/Private'
  import InformationBar from './homePage/InformationBar'
  import CarRegister from './homePage/CarRegister'
  import Annular from './homePage/annular'
  import Pie from './homePage/pie'
  import Bar from './homePage/Bar'
  import ShangHaiMap from './homePage/ShangHaiMap'
  import ChinaMap from './homePage/ChinaMap'
  import SalesStatus from './homePage/SalesStatus'
  import Dealer from './homePage/Dealer'
  import SalesConsultant from './homePage/SalesConsultant'
  import { getSecondHand } from '@/api/api'

  export default {
    name: 'HomePage',
    components: {
      Private,
      SalesConsultant,
      Dealer,
      InformationBar,
      SalesStatus,
      CarRegister,
      ChinaMap,
      ShangHaiMap,
      Annular,
      Pie,
      Bar,
    },
    data () {
      return {
        gutter: 10,
        left: 7,
        center: 10,
        right: 7,
        registerNum: [],
        SecondHandData:[],
        url: {
          leftOne: '/cxm/cxmEtlTotalholdings/getRegisterNum'
        }
      }
    },
    mounted() {
      this.getSecondHand()
      this.getRegisterNum()
    },
    methods: {
      getSecondHand(){
        var that = this
        let params = {
          id : that.id
        }
        getSecondHand(params).then((res) => {
          if (res.success) {
            that.SecondHandData= res.result
          }
        })
      },
      // 左边第一块汽车保有量注册数
      getRegisterNum() {
        this.axios.get(this.url.leftOne,
          JSON.stringify()
        ).then(res => {
          let data = res.result
          let yearTotal = {};
          let newTotal = {};
          let monthTotal = {};
          let newTotal2 = {};
          for (let i in data) {
            if(data[i].id == 'STAT-001') {
              yearTotal = {total: {title: '当年累计', value: data[i].value, unit: data[i].unit}}
            } else if (data[i].id == 'STAT-009') {
              newTotal = {newEnergy: {subtitle: '新能源', value: data[i].value, unit: data[i].unit}}
            } else if (data[i].id == 'STAT-002') {
              monthTotal = {total: {title: '当月累计', value: data[i].value, unit: data[i].unit}}
            } else if (data[i].id == 'STAT-010') {
              newTotal2 = {newEnergy: {subtitle: '新能源', value: data[i].value, unit: data[i].unit}}
            }
          }
          let a = Object.assign(yearTotal, newTotal)
          let b = Object.assign(monthTotal, newTotal2)
          this.registerNum.push(a,b)
        }).catch(err => {
          this.expRoute("2",err.message)
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .home-layout {
    width: 100%;
    height: 100vh;
    background: url(../../assets/homePage/dpBg.png) left top no-repeat;
    background-size: 100% 100%;
  .gutter-example {
  .hl-top {
    position: relative;
    background: url(../../assets/homePage/title_canvas.png) left top no-repeat;
    background-size: 100% 100%;
  .gutter-box {
    /*background: red;
    line-height: 8vh;*/
    line-height: 49px;
  }
  .big-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .more {
    position: absolute;
    top: 16px;
    right: 2rem;
    font-size: 1.2em;
    color: #CDDDF6;
  }
  }
  .gutter-row {
  .bg-bar {
    width: 80%;
    margin: 0.5rem 0 0 1rem;
    /*background: linear-gradient(to right, #10203A 10%, #0c1629 80%);*/
  }
  .gutter-box {

  }
  .left-container {
    height: 92vh;
    display: flex;
    flex-direction: column;
  .l-one {
    margin: 1.5vh 0;
    display: flex;
    align-items: center;
    position: relative;
  .lo-container {
    height: 13vh;
    flex: 1;
    display: flex;
    flex-direction: column;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    /*position: relative;*/
    height: 13vh;
  .bg-title {
    /*position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid #70EFF8;
    border-right: 20px solid transparent;*/
  }
  .bg-bar {
  /*margin: 0.5rem 0 0 1rem;
  background: linear-gradient(to right, #10203A 10%, #0c1629 80%);*/
  .loc-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem 0 0 1rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  }

  .loc-container {
    color: #fff;
  .y-title, .y-unit {
    font-size: 12px;
    font-weight: bold;
  }
  .y-value {
    font-size: 18px;
    color: #70a1ff;
    display: inline-block;
    text-align: right;
    width: 60px;
    text-shadow: 0 0 1px #70a1ff;
  }
  .n-title,.unit {
    font-size: 10px;
  }
  .n-value {
    font-size: 18px;
    color: #FB7A1E;
    display: inline-block;
    text-align: right;
    width: 60px;
    text-shadow: 0 0 1px #FB7A1E;
  }

  .locc-one {

  }
  .locc-two {
    /*padding-top: 0.5vh;*/
  }
  }
  }
  }
  }
  .l-two {
    position: relative;
    margin-bottom: 1.5vh;
  .lt-container {
    height: 26.5vh;
    overflow: hidden;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    /*position: relative;*/
    height: 26.5vh;
  .bg-title {
    /*position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid #70EFF8;
    border-right: 20px solid transparent;*/
  }
  .bg-bar {
  /*margin: 0.5rem 0 0 1rem;
  background: linear-gradient(to right, #10203A 10%, #0c1629 80%);*/
  .loc-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  }
  ul {
    margin: 0;
    padding: 0;

  }
  .clearfloat {
    zoom: 1;
  }
  .clearfloat::after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    /*height: 0;*/
  }

  .tab-list {
    position: relative;
    top: -18px;
  }

  .tab-list .tab-itom {
    float: right;
    list-style: none;
    margin-right: 4px;
  }

  .tab-itom .test-label {
    position: relative;
    display: block;
    width: 25px;
    height: 10px;
    border: 1px solid transparent;
    border-radius: 25px;
    /*line-height: 27px;*/
    text-align: center;
    /*background: #006ced;*/
    background: linear-gradient(to right, #338cdf, #0660b5);
  }

  .tab-itom .tab-box {
    /* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
    position: absolute;
    left: 0;
    top: 28px;
    width: 100%;
    /*height: 120px;*/
    /*border: 1px solid #cbcccc;*/
    border-radius: 5px;
    border-top-left-radius: 0px;
    /*background: #0c1629;*/
    background: rgba(8,51,113,1);
    color: #fff;
    /* 设置层级最低方便选中状态遮挡 */
    z-index: 0;
  /*background: #00feff;*/

  .one {
    display: flex;
    flex-direction: row;
    color: #ffffff;
  .ltc-left {
    flex: 1;
  }
  .ltc-right {
    flex: 1;
  }
  }
  }
  /* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
  input[type="radio"] {
    position: absolute;
    opacity: 0;
  }
  /* 利用选择器实现  tab切换 */

  /* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
  input[type="radio"]:checked+.test-label {
    /* 为了修饰存在的边框背景属性 */
    /*border-color: #cbcccc;*/
    /*border-bottom-color: #fff;*/
    /*background: #00ffff;*/
    background: linear-gradient(to right, #73e7e1, #00998f);
    /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
    z-index: 10;
  }
  /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
  input[type="radio"]:checked~.tab-box {
    /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
    z-index: 5;
  }
  }
  }
  }
  .l-three {
    position: relative;
    margin-bottom: 1.5vh;
  .lt-container-bottom {
    height: 36vh;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
    color: #CDDDF6;
  .bg-border {
    height: 36vh;
  .ltcb-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }

  .ltcb-container {

  }
  }
  }
  }
  .l-four {
    position: relative;
  .lt-container-top {
    height: 12vh;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    height: 12vh;
  .ltct-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .ltct-container {
    float: left;
    width: 50%;
    padding: 10px 0 0 1rem;
  .ltc-left {
    color: #ffffff;
  .ll-text {
    font-size: 18px;
    color: #FB7A1E;
  }
  }
  .ltc-right {
    /*flex: 1;*/
    /*padding-top: 0.5vh;*/
    /*float: right;*/
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 40px;
  }
  }
  }
  }
  }
  }
  .center-container {
    height: 92vh;
    display: flex;
    flex-direction: column;
  .c-two {
    position: relative;
    margin: 1.5vh 0;
  .ctwo-container {
    height: 53.5vh;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    height: 53.5vh;
  .loc-title {
    font-size: 14;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .ct-container {

  }
  }
  }
  }
  .c-three {
    position: relative;
  .cthree-container {
    height: 37vh;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    height: 37vh;
  .loc-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .ct-container {
    padding: 0.5rem;
  }
  }
  }
  }
  }
  .right-container {
    height: 92vh;
    display: flex;
    flex-direction: column;
    color: #CDDDF6;
  .r-two {
    position: relative;
    margin: 1.5vh 0;
  .rtwo-container {
    height: 29.5vh;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    height: 29.5vh;
  .loc-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .ct-container {
    padding: 0.5rem;
  }
  }
  }
  }
  .r-three {
    position: relative;
    margin-bottom: 1.5vh;
  .rthree-container {
    height: 29.5vh;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    height: 29.5vh;
  .loc-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .ct-container {
    padding: 0.5rem;
  }
  }
  }

  }
  .r-four {
    position: relative;
  /*margin-bottom: 1.5vh;*/
  .rfour-container {
    height: 30vh;
    /*background: #0c1629;*/
    border: 1px solid #305382;
    box-shadow: inset 0 0 10px #305382;
  .bg-border {
    height: 30vh;
  .loc-title {
    font-size: 14px;
    font-weight: bold;
    color: #CDDDF6;
    /*padding: 0.5rem;*/
    background: linear-gradient(to bottom, #F7FEFF 50%, #70EFF8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .ct-container {
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
  .one {
    flex: 1;
  }
  .two {
    flex: 1;
  }
  }
  }
  }
  }
  }
  }
  }
  }
</style>